<template>
	<div class="tabbar">
		<div class="tabbar-wrap sd-flex">
			<div class="tabbar-item" v-for="(item, index) in datas.list" :key="index" :style="baseStyle(datas)" :class="centerClassName(datas, index)">
				<div class="image-wrap" v-if="datas.layout != 2">
					<div class="sd-image sd-flex" style="width: 26px; height: 26px; border-radius: 4px">
						<el-image v-if="item.inactiveIcon != ''" :src="STATIC_URL + item.inactiveIcon" fit="cover" class="cover-image" />
						<div v-else>
							<span class="icon my-icon icon-tupianzhanshi"></span>
						</div>
					</div>
				</div>
				<div class="text" :style="{ color: datas.inactiveColor }" v-if="datas.layout != 3">
					{{ item.text }}
				</div>
			</div>
		</div>
		<!-- 删除组件 -->
		<slot name="deles" />
	</div>
</template>

<script setup name="tabBar">
import { STATIC_URL } from '/@/utils/config';

const props = defineProps({
	datas: {},
});

const baseStyle = (item) => {
	if (item.list.length == 0) {
		return {
			width: 100 / 5 + '%',
		};
	}
	return {
		width: 100 / item.list.length + '%',
	};
};

const centerClassName = (item, index) => {
	console.log('item.datas.length / 2:  ', Math.floor(item.list.length / 2));
	console.log('centerClassName-index: ', index);
	console.log('item % 2: ', item.list.length % 2);
	if (item.mode == 2) {
		const className = Math.floor(item.list.length / 2) == index && item.list.length % 2 != 0 ? 'center-item' : '';
		console.log('className: ', className, ' ,index: ', index);
		return className;
	}
};
</script>

<style lang="scss" scoped>
.tabbar {
	width: 100%;
	position: absolute;
	bottom: 3px;
	left: 0px;
	z-index: 2;
	height: 50px;
}

.tabbar .tabbar-wrap {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 58px;
}

.tabbar-wrap .tabbar-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: 12px;
}

.tabbar .tabbar-item.center-item .text {
	display: none;
}

.tabbar .tabbar-item.center-item .image-wrap {
	width: 49px;
	height: 49px;
	border-radius: 50%;
	background: #f00;
	margin-bottom: 4px;
	background: linear-gradient(123deg, #fe8c00 0%, #ff6000 100%);
	box-shadow: 0 9px 13px 5px #fe810038;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
